<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<script type="text/javascript" src="<s:url value="/js/jquery.validate.min.js"/>"></script>
<script type="text/javascript" src="<s:url value="/js/importaciones.js"/>"></script>

<s:form id="formEdit" cssClass="tableEdit" >

    <tr>
        <th colspan="4" class="tableTitle">
            <h5>New Importation</h5>
        </th>
    </tr>

    <s:hidden name="importacion.id" value="%{importacion.id}"/>

    <s:url var="protUrl" action="fillProtocolList" namespace="/"/>

    <%--PAIS--%>
    <s:if test="%{importacion.id == null}" >
        <s:select label="Country" name="importacion.compromisopais.id" id="country" value="%{importacion.compromisopais.id}"
                  headerKey="" headerValue="Choose Country"
                  list="paisList"
                  listKey="id"
                  listValue="country"
                  onchange="actualizarProtocolos('%{protUrl}');"
                >
        </s:select>
    </s:if>
    <s:else>
        <tr>
            <td>
                <label>Country:</label>
            </td>
            <td>
                <s:hidden id="country" name="importacion.compromisopais.id" value="%{importacion.compromisopais.id}" />
                <s:textfield disabled="true" theme="simple" name="importacion.compromisopais.country" value="%{importacion.compromisopais.country}"/>
            </td>
        </tr>
    </s:else>
    <s:textfield label="Import permit" name="importacion.importPermit" value="%{importacion.importPermit}"/>




    <%--DROGAS--%>

    <table id="table_drugs" class="tableEdit" style="margin-bottom: 0px">
     <s:if test="%{importacion.id == null || importacion.drogaImportaciones.isEmpty() == true}">
        <tr id="drug">
            <td>
                <label>Drug:</label>
            </td>
            <td>
                <s:select name="importacion.drogaImportaciones[0].droga.id" id="droga0"
                          headerKey="" headerValue="Choose Drug"
                          list="drogaList"
                          listKey="id"
                          listValue="drugName"
                          theme="simple"
                          cssClass="drogaSelect"
                          class="drogaSelect"
                          onchange="actualizarProtocolos('%{protUrl}');"
                        >
                </s:select>
            </td>
        </tr>
        <tr id="inQ">
            <td>
                <label>Initial Quantity:</label>
            </td>
            <td>
                <s:textfield id="qty0" theme="simple" name="quantities[0]" cssClass="qtyClass"/>
            </td>
        </tr>
        <tr id="unit">
            <td>
                <label>Unit:</label>
            </td>
            <td>
                <s:textfield id="unit0" theme="simple" name="importacion.drogaImportaciones[0].unit" cssClass="unitClass"/>
            </td>
        </tr>
        <tr id="delDrug" class="trEspacioAbajo">
            <td>
                <s:hidden></s:hidden>
            </td>
            <td id="delDrugCell0" align="right"><a onclick="deleteDrug('table_drugs', $(this).closest('tr'));actualizarProtocolos('<s:property value="%{protUrl}"/>');"><img src="<s:url value="/images/delete2.png"/>" alt="Delete"></a></td>
        </tr>
        <s:hidden id="cantDrugs" value="1" />
        <s:hidden id="ultimoIdDrugs" value="0" />
    </s:if>
    <s:else>
        <s:iterator value="%{importacion.drogaImportaciones}" var="drogaImp" status="stat">
            <s:hidden value="%{#drogaImp.id}" name="importacion.drogaImportaciones[%{#stat.index}].id"/>
            <s:iterator value="%{#drogaImp.protocoloImportaciones}" var="protImp" >
                <s:hidden name="qty%{#stat.index}takeOff" value="%{#protImp.takeOff}"/>
            </s:iterator>
            <tr id="drug">
                <td>
                    <label>Drug:</label>
                </td>
                <td>
                <s:select name="importacion.drogaImportaciones[%{#stat.index}].droga.id" id="droga%{#stat.index}"
                          value="%{#drogaImp.droga.id}"
                          headerKey="" headerValue="Choose Drug"
                          list="drogaList"
                          listKey="id"
                          listValue="drugName"
                          theme="simple"
                          cssClass="drogaSelect"
                          class="drogaSelect"
                          onchange="actualizarProtocolos('%{protUrl}');"
                          disabled="true"
                        >
                </s:select>
                    <s:hidden value="%{#drogaImp.droga.id}" name="importacion.drogaImportaciones[%{#stat.index}].droga.id"/>
                </td>
            </tr>
            <tr id="inQ">
                <td>
                    <label>Initial Quantity:</label>
                </td>
                <td>
                    <s:textfield id="qty%{#stat.index}" theme="simple" name="quantities[%{#stat.index}]" value="%{#drogaImp.initialQty}" cssClass="qtyClass"/>
                    <label class="errorLabel" id="qty<s:property value="%{#stat.index}"/>Error" style="color:red;display: none">Invalid value</label>
                </td>
            </tr>
            <tr id="unit" class="trEspacioAbajo">
                <td>
                    <label>Unit:</label>
                </td>
                <td>
                    <s:textfield id="unit%{#stat.index}" theme="simple" name="importacion.drogaImportaciones[%{#stat.index}].unit" value="%{#drogaImp.unit}" cssClass="unitClass"/>
                </td>
            </tr>
            <tr id="delDrug" class="trEspacioAbajo" style="display:none">
                <td>
                    <s:hidden></s:hidden>
                </td>
                <td id="delDrugCell<s:property value="%{#stat.index}"/>" align="right"><a onclick="deleteDrug('table_drugs', $(this).closest('tr'));actualizarProtocolos('<s:property value="%{protUrl}"/>')"><img src="<s:url value="/images/delete2.png"/>" alt="Delete"></a></td>
            </tr>
        </s:iterator>
        <s:hidden id="cantDrugs" value="%{importacion.drogaImportaciones.size()}" />
        <s:hidden id="ultimoIdDrugs" value="%{importacion.drogaImportaciones.size() - 1}" />
    </s:else>
    <tr>
        <th>
            <s:hidden></s:hidden>
        </th>
        <th align="right"><a onclick="addDrug('table_drugs')"><img src="<s:url value="/images/add2.png"/>" alt="Add Drug"></a></th>
    </tr>
    </table>




    <%--PROTOCOLOS--%>

    <table class="tableEdit" style="margin-top: 0px" id="table_prots">
        <s:if test="%{importacion.id == null || importacion.protocoloImportaciones.isEmpty() == true}">
            <tr id="protocol">
                <td>
                    <label>Protocols:</label>
                </td>
                <td style="padding-left: 35px">
                    <s:hidden id="protocolo0Selected" name="importacion.protocoloImportaciones[0].protocolo.id"/>
                    <select name="protocolo0"  id="protocolo0" class="protSelect"
                            onchange="protValue(this)">
                    <option>Choose Protocol</option>
                    </select>
                </td>
            </tr>
            <tr id="delProt" class="trEspacioAbajo">
                <td>
                    <s:hidden></s:hidden>
                </td>
                <td id="delProtCell0" align="right"><a onclick="deleteProt('table_prots', $(this).closest('tr'))"><img src="<s:url value="/images/delete2.png"/>" alt="Delete"></a></td>
            </tr>
            <s:hidden id="cantProts" value="1" />
            <s:hidden id="ultimoIdProts" value="0" />
        </s:if>
        <s:else>
            <s:iterator value="%{importacion.protocoloImportaciones}" var="protImp" status="stat">
                <s:if test="%{#protImp.fecha == null}" >
                    <s:hidden value="%{#protImp.id}" name="importacion.protocoloImportaciones[%{#stat.index}].id"/>
                    <tr id="protocol" class="trEspacioAbajo">
                        <td>
                            <label>Protocol:</label>
                        </td>
                        <td style="padding-left: 35px">
                            <s:hidden name="importacion.protocoloImportaciones[%{#stat.index}].protocolo.id" id="protocolo%{#stat.index}Selected" value="%{#protImp.protocolo.id}" />
                            <select name="protocolo<s:property value='%{#stat.index}'/>"
                                    value="<s:property value='%{#protImp.protocolo.id}'/>"
                                    id="protocolo<s:property value='%{#stat.index}'/>" class="protSelect"
                                    onchange="protValue(this)" disabled="true">
                                <option>Choose Protocol</option>
                            </select>
                        </td>
                    </tr>
                    <tr id="delProt" class="trEspacioAbajo" style="display:none">
                        <td>
                            <s:hidden></s:hidden>
                        </td>
                        <td id="delProtCell<s:property value="%{#stat.index}"/>" align="right"><a onclick="deleteProt('table_prots', $(this).closest('tr'))"><img src="<s:url value="/images/delete2.png"/>" alt="Delete"></a></td>
                  </tr>
                </s:if>
            </s:iterator>
            <s:hidden id="cantProts" value="%{importacion.protocoloImportaciones.size()}" />
            <s:hidden id="ultimoIdProts" value="%{importacion.protocoloImportaciones.size() - 1}" />
        </s:else>
        <tr>
            <th>
                <s:hidden></s:hidden>
            </th>
            <th align="right"><a onclick="addProt('table_prots');"><img src="<s:url value="/images/add2.png"/>" alt="Add Protocol"></a></th>
        </tr>
    </table>

    <table class="tableEdit">
    <tr>
        <td colspan="2" class="centeredButtons">
            <s:submit value="Save" id="save" action="save" onclick="return validate();" theme="simple" />
            <s:submit value="Cancel" id="cancel" action="cancelDiscount" theme="simple" />
        </td>
    </tr>
    </table>
</s:form>

<script type="text/javascript">
    actualizarProtocolos('<s:property value="%{protUrl}"/>');
</script>

<script type="text/javascript">
    $('#create').css({"color":"#EE5102","fontWeight":"bold"});
</script>